<template>
  <div>
    <mt-header class="tou" title="我的课程">
      <router-link to="/myClass" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <div class="none" v-if="ipExist">
      <van-empty description="暂时还没有添加课程哟" />
      <router-link to="/">
        <mt-button plain size="normal" type="default">点我去添加课程</mt-button>
      </router-link>
    </div>
    <div v-else class="hot_class" v-for="(item, i) of date" :key="i">
      <h3>【{{ item.cTitle1 }}】{{ item.cTitle2 }}</h3>
      <span class="kuang">{{ item.cType }}</span>
      <span>{{ item.cTimeStart }}</span>
      <!-- 头像 -->
      <div class="photo">
        <div class="photo_div">
          <img :src="item.cAvatar1" alt="" />
          <span>{{ item.cTeacher1 }}</span>
        </div>
        <div class="photo_div">
          <img :src="item.cAvatar2" alt="" />
          <span>{{ item.cTeacher2 }}</span>
        </div>
        <div class="photo_div">
          <img :src="item.cAvatar3" alt="" />
          <span>{{ item.cTeacher3 }}</span>
        </div>
        <div class="text">
          <span>￥{{ item.cPrice }}</span>
          <mt-button @click="del(item.cId, 1)" size="small" type="primary"
            >取消收藏</mt-button
          >
          <p>限领{{ item.cSaled }}人 已领{{ item.cSales }}人</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";

export default {
  inject: ['reload'],
  data() {
    return {
      date: [],
      datelist: [],
      datalist: "",
      uId: sessionStorage.uId,
      ipExist: true
    };
  },
  methods: {
    syck() {
      this.axios.post("/kc/getct", `uId=${this.uId}`).then((res) => {
        // console.log(res);
        if (res.data.result == undefined) {
          this.ipExist = true
          return;
        } else {
          this.date = res.data.result;
          for (var item of res.data.result) {
            // console.log(item)
            this.datelist.push(item.cId);
          }
          this.ipExist = false
          // console.log(this.date);
        }
      });
    },
    del(cid, uid) {
      this.axios.post("/kc/delct", `cId=${cid}&uId=${this.uId}`).then((res) => {
        // console.log(res)
        for (var i = 0; i < this.datelist.length; i++) {
          if (cid == this.datelist[i]) {
            this.datelist.splice(i, 1);
            Toast(res.data.message);
            // window.location.reload();
            this.reload()
          }
        }
      });
    },
  },

  mounted() {
    this.syck();
  },
};
</script>
<style>
.tou {
  background-color: gold;
  color: black;
}
.none {
  text-align: center;
}
/* 热门课程 */
.hot_class {
  text-align: left;
  background-color: white;
  border-radius: 5px;
  box-shadow: 2px 2px 4px grey;
}

.kuang {
  padding: 2px 4px;
  background-color: gold;
  border-radius: 3px;
  margin-left: 10px;
  margin-right: 10px;
}

.photo {
  display: flex;
  text-align: center;
  margin-top: 20px;
  margin-left: 10px;
}

.photo img {
  width: 40px;
}

.photo span {
  display: block;
  font-size: 12px;
}
.photo_div {
  margin-right: 10px;
}

.text {
  flex: 1;
  text-align: right;
  margin-right: 15px;
}

.text span {
  font-size: 16px;
  color: red;
  font-weight: bold;
}

.text p {
  color: gray;
  font-size: 13px;
}
</style>